import { Breadcrumb, Select, Input } from 'antd'
import { Table, Popconfirm, Button, Modal, Form, Switch } from 'antd';
import React from 'react';
import { useState } from 'react';
const { Option } = Select;
import '../../assets/styles/YbargainList.less'
import { history } from 'umi'
import { instance } from '../../../../api/request'

const { Search } = Input;
export default function seckill() {
    const [dataSource, setdataSource] = useState([])

    const [isModalVisible, setIsModalVisible] = useState(false);

    const subValut: any = React.createRef()
    const [arrs, setarr] = useState([])

    React.useEffect((): any => {


        findDate()
    }, [])
    async function findDate() {
        const res = await instance.get('/bargainShop/findBoth')

        var datarr: any = []
        res.data.forEach((item: any, index: any) => {

            let objin = JSON.parse(item.specification)
            console.log(objin);

            const eachObj = {
                id: item.id,
                designation: item.designation,
                surfaceplot: item.surfaceplot,
                bargainNum: item.bargainNum,
                limitNum: item.limitNum,
                joinNum: item.joinNum,
                helpNum: item.helpNum,
                surplus: item.surplus,
                succeedNum: item.succeedNum,
                endTime: item.endTime,
                state: item.state,
                pid: item.pid,
                sid: item.sid,
                color: objin.color,
                seckillPrice: item.seckillPrice,
                costprice: item.costprice,
                inventory: item.inventory,


            }


            datarr.push(eachObj)


        })
        datarr.forEach((ite: any, index: any) => {
            ite.key = index
        })
        setarr(datarr)
        setdataSource(datarr)

    }
    function del(record: any) {
        console.log(record, 1111);

    }

    function showModal() {
        setIsModalVisible(true);
    }

    function handleCancel() {
        setIsModalVisible(false)
    }

    function onFinish() {


        console.log(subValut.current.getFieldsValue());

        setIsModalVisible(false);
    }
    //改变状态
    function onChanges(checked: any) {
        console.log(checked, 99999);

    }
    //商品添加
    function add() {
        history.push({
            pathname: '/bargainOne',

        })
    }
    const columns: any = [
        {
            title: 'ID',
            dataIndex: 'id',
            key: 'id',

        },
        {
            title: '砍价图片',
            dataIndex: 'surfaceplot',
            key: 'surfaceplot',
            render: (_: any, record: any) => {
                return <>
                    <div style={{ display: 'flex' }}>

                        <img style={{ width: '4rem', height: '4rem', marginRight: '0.5rem' }} src={record.surfaceplot} />


                    </div>
                </>
            }
        },
        {
            title: '砍价名称',
            dataIndex: 'designation',
            key: 'designation',
        },
        {
            title: '颜色',
            dataIndex: 'color',
            key: 'color',
        },
        {
            title: '砍价价格',
            dataIndex: 'seckillPrice',
            key: 'seckillPrice',
        },
        {
            title: '最低价格',
            dataIndex: 'costprice',
            key: ' costprice',
        },
        {
            title: '参与人数',
            dataIndex: 'joinNum',
            key: 'joinNum',
        },
        {
            title: '帮忙砍价人数',
            dataIndex: 'helpNum',
            key: 'helpNum',
        },
        {
            title: '砍价成功人数',
            dataIndex: 'succeedNum',
            key: 'succeedNum',
        },
        {
            title: '限量',
            dataIndex: 'limitNum',
            key: 'limitNum',
        },
        {
            title: '限量剩余',
            dataIndex: 'surplus',
            key: 'surplus',
        },
        {
            title: '结束时间',
            dataIndex: 'endTime',
            key: 'endTime',
        },
        {
            title: '状态',
            key: 'shuo',
            render: () => {

                return <>
                    <Switch defaultChecked onChange={(e) => onChanges(e)} />
                </>
            }
        },

        {
            title: '操作',
            key: '操作',
            render: (_: any, record: any) => {
                return <>
                    <Popconfirm title="您确定要删除吗?" onConfirm={() => del(record)}>
                        <Button type="primary">删除</Button>
                    </Popconfirm>
                    <Button type="primary" onClick={() => showModal()}>编辑</Button>
                    <Modal title="编辑" visible={isModalVisible} onCancel={() => handleCancel()} footer={[]}>
                        <Form
                            name="basic"

                            ref={subValut}
                            onFinish={() => onFinish()}

                        >
                            <Form.Item
                                label="秒杀名称"
                                name="name"
                            >
                                <Input />
                            </Form.Item>

                            <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                                <Button type="primary" htmlType="submit">
                                    编辑
                                </Button>
                            </Form.Item>
                        </Form>
                    </Modal>

                </>
            }


        },
    ]
    return (

        <div className="Yseckill">
            <div className="top">
                <Breadcrumb>
                    <Breadcrumb.Item>主页</Breadcrumb.Item>
                    <Breadcrumb.Item>营销</Breadcrumb.Item>
                    <Breadcrumb.Item>
                        <a href="/bargainShop">砍价商品</a>
                    </Breadcrumb.Item>
                </Breadcrumb>
            </div>

            <div className="bottom">
                <div className="searchbox">
                    <div className="show">
                        <span>是否显示</span>
                        <Select defaultValue="请选择" style={{ width: 120 }} >
                            <Option value="1">关闭</Option>
                            <Option value="2">开启</Option>
                        </Select>
                    </div>
                    <div className="searchName">
                        <div className="secname">商品搜索</div>
                        <Search placeholder="请输入商品名称/ID" enterButton />
                    </div>
                </div>
                <button className="add" onClick={add}>添加商品</button>
                <Table dataSource={dataSource} columns={columns} ></Table>

            </div>
        </div>
    )
}
